<template>
  <div class="index-container">
    <div class="main-header clearfix">
      <el-row>
       <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
          <!-- <el-button type="primary"  icon="el-icon-plus" class="sureBtn"  size="medium"  @click="handleAdd" > 新 增 类 型</el-button> -->
          <span style="color: transparent;">1</span>
        </el-col>
        <el-col :xs="16" :sm="16" :md="16" :lg="16" :xl="16">
          <div class="search fr">
            <div>
              <el-date-picker
                v-model="selectForm.start_time"
                align="right"
                type="date"
                placeholder="开始时间"
                value-format="yyyy-MM-dd"
                :picker-options="pickerOptions">
              </el-date-picker>
            </div>
            <div>
             <el-date-picker
               v-model="selectForm.end_time"
               align="right"
               type="date"
               placeholder="结束时间"
               value-format="yyyy-MM-dd"
               :picker-options="pickerOptions">
             </el-date-picker>
            </div>
            <div>
              <el-select v-model="selectForm.team_id" clearable placeholder="负责站点" filterable size="medium"  style="width: 100%;">
                <el-option
                  v-for="item in teamList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </div>
            <el-button size="medium"   type="primary"   icon="el-icon-search"  class="fr"    @click="handleSearch" > 搜索</el-button>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="main-content" style="height: calc(100vh - 250px);">
      <main-table
        :columns="tableColumns"
        :data="tableList"
        :loading="loading"
        :pagination="pagination"
        @getData="fetchTableList"
        wrapperHeight="calc(100% - 73px)" height="100%"
      >
      <el-table-column slot="order_num1" label="服务次数(政府)" align="center">
        <template slot-scope="scope">
          <span class="team-cell-span" @click="viewUser(scope.row)">{{ scope.row.order_num1 }}</span>
        </template>
      </el-table-column>
      <el-table-column slot="order_num" label="服务次数(拓展)" align="center">
        <template slot-scope="scope">
          <span class="team-cell-span" @click="viewOlder(scope.row)">{{ scope.row.order_num }}</span>
        </template>
      </el-table-column>
      </main-table>
    </div>
  </div>
</template>
<script>
  import mainTable from "@/components/main-table/index";
  import * as APITasklog from '@/api/tasklog'
  import * as APIWangge from "@/api/wangge";
  import * as APIOrder from '@/api/order'
  import { sex, age, countTimeDown } from "@/utils"
  export default {
    name: "doorserve-serve-team-task",
    components: {
      mainTable
    },
    filters: {
      getTotal (row) {
        return Number(row.num0) + Number(row.num1) + Number(row.num2) + Number(row.num3) + Number(row.funum1) + Number(row.funum2)
      }
    },
    data() {
      return {
        // 日期设置
        pickerOptions: {
          disabledDate (time) {
            return time.getTime() > Date.now()
          }
        },
        loading: false,
        title: '添加图标',
        dialogVisible: false,
        ruleForm: {},
        currentSelectedData: [],
        pageData: {},
        selectForm: {
          page:1
        },
        tableList:[],
        pagination: {
          current: 1,
          size: 10,
          total: 0
        },
        tableColumns: [
         {
           index: true,
           fixed: true
         },
         {
           prop: 'name',
           label: '老人姓名'
         },
         {
           prop: 'sex',
           label: '性别',
           formatter (row, column, cellValue) {
             return sex(cellValue)
           }
         },
         {
           prop: 'age',
           label: '年龄',
           formatter (row, column, cellValue) {
             if(cellValue){
               return cellValue
             }
           }
         },
        /* {
           prop: 'birthday',
           label: '年龄',
           formatter (row, column, cellValue) {
             return age(cellValue)
           }
         }, */
         {
           prop: 'mobile',
           label: '联系方式'
         },
         {
           prop: 'team_name',
           label: '负责站点',
           width: 200
         },
         {
           prop: 'address',
           label: '家庭住址',
           minWidth: 200
         },
         {
           prop: 'bind_name',
           label: '负责护工'
         },
         {
           slot: 'order_num1'
         },
         {
           prop: 'order_long1',
           label: '服务时长(政府)',
           align: 'center',
           formatter (row, column, cellValue) {
             return countTimeDown(cellValue)
           }
         },
         {
           slot: 'order_num'
         },
         {
           prop: 'order_long',
           label: '服务时长(拓展)',
           align: 'center',
           formatter (row, column, cellValue) {
             return countTimeDown(cellValue)
           }
         }
        ],
        key: Math.random(),
        teamList:[]
      };
    },
    created() {},
    beforeDestroy() {},
    mounted() {
      this.fetchTableList();
      this.teamIndex();
    },
    methods: {
      // 站点列表
      teamIndex () {
        APIWangge.teamList({ page_size: 100 }).then(res => {
          this.teamList = res['data']['list']
        })
      },
      handleSearch() {
        this.pagination = {
          current: 1,
          size: 10,
          total: 0
        }
        this.fetchTableList({ page: 1 })
      },
      fetchTableList(pageObj) {
        this.loading = true;
        let data = {
          ...this.selectForm,
          ...pageObj
        }
        APIOrder.ordermsgOlder(data).then((resp) => {
          if (resp.code === 200) {
            const { list = [], total = 0 } = resp.data;
            this.tableList = list || []
            this.pagination.total = total;
          }
        }).finally(() => {
          this.loading = false;
        });
      },
      handleCurrentChange(val) {
        this.selectForm.page = val;
        this.fetchTableList();
      },
      // 受服务次数
      viewUser (row) {
        this.$router.push({
          path: '/serveFreeOrderlist',
          query: {
            oid: row.id,
            source_type: 1,
            name: row.name
          }
        })
      },
      // 拓展客户
      viewOlder (row) {
        this.$router.push({
          path: '/serveOrderlist',
          query: {
            oid: row.id,
            source_type: 2,
            name: row.name
          }
        })
      },
    },
  };
</script>
<style lang="scss" scoped>
  .index-container {
    box-sizing: border-box;
    width: 100%;
    padding: 0 30px !important;
    margin: 0 !important;
    background: #fff !important;

    .main-header {
      padding-top: 4px;
      margin-bottom: 24px;

      .search {
        display: inline-block;

        .search-title {
          flex: 0 0 48px;
          width: 48px;
          font-size: 16px;
          line-height: 36px;
          color: #333;
        }
      }

      .search > div {
        display: inline-block;
        margin-left: 20px;
      }
    }
    .task-icon-img{
      width: 80px;
      height: 80px;
    }
  }

  .form-footer {
    padding-left: 100px;
  }

  .dialog-main {
    .table-do {
      margin-bottom: 15px;
    }

    ::v-deep {
      th {
        .cell {
          color: #fff;
        }
      }
    }
  }
  .team-cell-span{
    cursor: pointer;
    color: #40ffed;
    display: inline-block;
    height: 100%;
    width: 100%;
    font-weight: bold;
    text-decoration: underline;
  }
</style>
